<template>
  <div :id="chartId" :style="{ width, height }"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'MidAEcharts',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    option: {
      type: Object,
      default: () => ({})
    },
    value: {
      type: Number,
      default: 0
    },
    msg: String,
    colors: {
      type: Array,
      default: () => ['#63e2fe', '#63e2fe']
    }
  },
  data() {
    return {
      chartId: this.randomNum(),
      echart: null,
      title: null,
      pieCenter: ['50%', '45%'],
      pieLabel: {
        position: 'center', //inside（在饼图上显示）,outside(默认就会出现引导线) center
        formatter: () => {
          return this.value + '%'
        },
        fontSize: 18,
        fontWeight: 'bold',
        color: '#FFF' // #028BC8
      },
      innerRingColor: null,
      intervalIns: null
    }
  },
  created() {
    this.innerRingColor = {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: this.colors[0] // 0% 处的颜色
        },
        {
          offset: 1,
          color: this.colors[1] // 100% 处的颜色
        }
      ],
      global: false // 缺省为 false
    }
  },
  mounted() {
    this.initEchart()
    window.addEventListener('resize', this.handleUpdateSize())
  },
  activated() {
    this.echart?.resize()
  },
  methods: {
    randomNum() {
      let num = ''
      for (let i = 0; i < 10; i++) {
        num += Math.floor(Math.random() * 100)
      }
      return num
    },
    initEchart() {
      const chartDom = document.getElementById(this.chartId)
      if (!this.echart) {
        this.echart = echarts.init(chartDom)
      } else {
        this.echart.clear()
      }
      this.setOptions()
    },
    setOptions() {
      let option = {
        color: this.colors,
        title: {
          text: this.option.title,
          textStyle: {
            color: '#fff',
            fontSize: 24
          },
          padding: 0,
          bottom: 2,
          left: 'center'
        },
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        tooltip: {
          show: false
        },
        legend: {
          show: false,
          ...(this.option.legend || {})
        },
        series: [
          {
            name: '',
            type: 'pie',
            center: this.option.pieCenter || this.pieCenter, //圆心的位置
            radius: ['56%', '0%'], //环形图的本质就在这里 [内半径!=0，外半径] 外半径越大，圆越大
            avoidLabelOverlap: false, //做同心圆用到
            clockwise: false, //顺时针排列
            startAngle: 90, //起始角度 影响不大
            hoverAnimation: false,
            label: {
              ...this.pieLabel,
              ...this.option.label,
              show: true //false不显示饼图上的标签
            },
            data: [
              {
                value: this.value,
                name: '完成',
                itemStyle: { color: this.innerRingColor, opacity: 1 }
              },
              {
                value: 100 - this.value,
                name: '未完成',
                itemStyle: { color: 'rgba(182,255,251,0.2)' }
              }
            ].sort((a, b) => b.value - a.value), //数组从大到小排序

            emphasis: {
              scale: false,
              scaleSize: 1,
              label: {
                show: true,
                formatter: (params) => (params.name === '完成' ? `${this.value}%` : '')
              }
            }
          },
          {
            name: '',
            type: 'pie',
            center: this.option.pieCenter || this.pieCenter, //圆心的位置
            radius: ['70%', '63%'], //环形图的本质就在这里 [内半径!=0，外半径] 外半径越大，圆越大
            avoidLabelOverlap: false, //做同心圆用到
            clockwise: false, //顺时针排列
            startAngle: 0, //起始角度 影响不大
            hoverAnimation: false,
            label: { ...this.pieLabel, ...this.option.label },
            data: [
              { value: this.value, name: '完成' },
              { value: 100 - this.value, name: '未完成' }
            ].sort((a, b) => b.value - a.value), //数组从大到小排序

            emphasis: {
              scale: false,
              scaleSize: 10,
              label: {
                show: true,
                formatter: (params) => (params.name === '完成' ? `${this.value}%` : '')
              }
            }
          }
        ]
      }
      this.echart.setOption(option)
    },
    handleUpdateSize() {
      this.echart?.resize()
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.handleUpdateSize())
  }
}
</script>
<style scoped>
.box_b {
  height: 100%;
}
</style>
